<template>
	<div style="text-align: center">
    <el-transfer
			ref="transfer"
      style="text-align: left; display: inline-block"
      v-model="value"
			:filter-method="filterMethod"
      filterable
      :left-default-checked="leftDefaultChecked"
      :right-default-checked="rightDeafultChecked"
      :titles="defaultTitles"
      :button-texts="buttonText"
      :data="transferData"
			:sourceData="transferData">
      <span slot-scope="{ option }" style="width:100%;display:inline-block;">
        <span style="width:33.33%;display:inline-block;">{{ option.key }}</span>
        <span style="width:33.33%;display:inline-block;">{{ option.label }}</span>
        <span style="width:33.33%;display:inline-block;">{{ option.type }}</span>
      </span>
    </el-transfer>
  </div>
</template>
<script>
const SEARCH_PROPS = ['name', 'code', 'sign', 'completeSign']
export default {
	name: 'fx-transfer',
	props: {
		leftDefaultChecked: {
			type: Array,
			default: () => {
				return []
			}
		},
		rightDeafultChecked: {
			type: Array,
			default: () => {
				return []
			}
		},
		defaultTitles: {
			type: Array,
			default: () => {
				return []
			}
		},
		buttonText: {
			type: Array,
			default: () => {
				return []
			}
		},
		transferData: {
			type: Array,
			default: () => {
				return []
			}
		},
		filterKeys: {
			type: Array,
			default: () => {
				return SEARCH_PROPS
			}
		}
	},
	data () {
		return {
			value: [],
			searchKey: '',
			filterMethod (query, item) {
				return item.label.indexOf(query) > -1 || item.key.indexOf(query) > -1 || item.type.indexOf(query) > -1
			}
		}
	}
}
</script>

